<template>
	<view>
		<view class="datePicker">
			<view class="" @click="onShowDatePicker('range')">
				{{range.length>0&&range?(range[0]+ '至' +range[1]):'工单时间段筛选'}}
			</view>
			<view class="iconfont icon-app-xiangyou"></view>
		</view>
		<view class="apply-title">
			<view class="left">
				<view style="color: red;">*</view>关联工单信息
			</view>
		</view>

		<view class="bx-list">
			<view class="bx-list-title" style="padding: 30rpx;">
				<view class="left" style="width: 70%;">
					<input placeholder="请输入工单号" @input="togoInputChange" v-model="orderNum"
						style="padding-left: 20rpx;" />
				</view>
				<view class="right1"
					style="width: 30%;display: flex; justify-content: flex-end;border-left: 2px solid #f2f2f2;"
					@click="togoselectChange">
					请选择<view class="iconfont icon-app-xiangyou"></view>
				</view>
				<!-- <view class="right2" @click="togoselectChange">维修工单</view> -->
			</view>
		</view>
		<view class="bx-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>原申请单号
				</view>
				<view class="right1" @click="togoselectChange2">
					<view class="color3" style="padding-right: 20rpx;" v-if="params.applyNum">{{params.applyNum}}</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="bx-list">
			<view class="bx-list-title">
				<view class="left">
					<view style="color: red;">*</view>退还申请人
				</view>
				<view class="right1">
					<view class="color3" style="padding-right: 20rpx;" v-if="returnApplyName">{{returnApplyName}}</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="bx-list">
			<view class="bx-list-title" @click="togoPeopleSelect(5)">
				<view class="left">
					<view style="color: red;">*</view>退还审批人
				</view>
				<view class="right1">
					<view class="color3" style="padding-right: 20rpx;" v-if="params.dealUserName">{{params.dealUserName}}
					</view>
					<view v-else>请选择</view>
					<view class="iconfont icon-app-xiangyou"></view>
				</view>
			</view>
		</view>
		<view class="bx-title" style="padding-top: 40rpx; padding-bottom: 40rpx;"
			v-if="infoList.partDetailResponses&&infoList.partDetailResponses.length>0">
			<view class="left">
				<view style="color: red;">*</view>备件退还选择<view style="color: #8c8c8c;">(勾选后选择,才可填写退还数量)</view>
			</view>
		</view>
		<view class="search-list">
			<u-gap height="8" bgColor="#f2f2f2" v-if="infoList.length"></u-gap>
			<view class="search-item" v-for="(item,index) in infoList" :key="index">
				<view class="item-top">
					<view class="iconfont " @click="selectItem(item)"
						:class="[item.isChecked?'icon-app-duoxuanyixuan select-bg':'icon-app-duoxuanweixuan unselect-bg']">
					</view>
					<!-- <view class="item-name"> {{item.name}}</view> -->
					<view class="item-txt">
						<view class="left-icon">
							<image
								:src="item.partPicture?item.partPicture:'../../../static/images/index/weibaorenwu.png'">
							</image>
						</view>
						<view class="right-txt">
							<view class="txt1">{{item.partNum}}{{item.partName}}</view>
							<view class="txt-right">
								<view class="txt2">{{item.partTypeName}}</view>
								<view class="txt2">共{{item.amount}}件</view>
							</view>
						</view>
					</view>
				</view>
				<!-- v-if="item.isChecked" -->
				<view class="padding5"><u-gap height="1" bgColor="#f2f2f2" ></u-gap></view>
				<view class="item-bottom" >
					<view class="txt2">退还数量</view>
					<view style="font-size:28rpx;color:#8c8c8c;margin-left: 10rpx;">
						最多可申请退{{item.amount}}件
					</view>
					<view class="addnum">
						<u-number-box v-model="item.returnNum" @change.prevent="onChange" :name="index"
							:max="item.amount" :disablePlus="item.returnNum>=item.amount" :buttonSize="24">

						</u-number-box>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="bx-list" style="margin-top: 2rpx; padding-bottom: 20rpx;">
			<view class="bx-list-title">
				<view class="left">
					备注信息
				</view>
			</view>
			<view class="input-textrea">
				<u--textarea class="textrea" v-model="value1" placeholder="请输入备注信息"></u--textarea>
			</view>
		</view> -->
		<view class="clear-bottom"></view>
		<view class="bx-bottom">
			<view class="btn" @click="$dianji(togoCOnfirm,'onoff')">提交</view>
		</view>
		<!-- 工单号选择 -->
		<u-popup :show="isShow" mode="bottom" :round="10" @close="close" @open="open">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem(item)" v-for="(item,index) in orderNumList" :key="index">
					{{item.orderNum}}
				</view>
			</view>
		</u-popup>
		<!-- 原申请单号选择 -->
		<u-popup :show="isShow2" mode="bottom" :round="10" @close="close2" @open="open2">
			<view class="sex-select">
				<view class="sex-item" @click="updateItem2(c,1)" v-for="(c,index) in orderNumList2" :key="index">
					{{c.applyNum}}
				</view>
			</view>
		</u-popup>

		<mxdatePicker :show="showPicker" :type="type" :value="timeValue" :show-tips="true" :begin-text="'开始'"
			:end-text="'结束'" :show-seconds="true" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import mxdatePicker from '../components/mx-datePicker/index.vue';
	export default {
		components: {
			mxdatePicker
		},
		data() {
			return {
				showPicker: false,
				range: [],
				type: 'range',
				timeValue: '',

				isShow: false,
				isShow2: false,
				orderNumList: [],
				orderNumList2: [],
				value1: '',
				value: 1,
				params: {
					applyNum: '', //申请单号
					dealUser: '', //
					dealUserName: '',
					refundDetailList: []
				},
				orderNum: '', //工单号
				returnApplyName: '',
				infoList: {},
				onoff: true,
			}
		},
		onLoad() {
			this.getRange()
			this.getAllOrderNumList();
			this.returnApplyName = uni.getStorageSync('userInfo').realName;
		},
		onShow() {
			console.log('审核人员选中返回后的数据', this.wxpeopleList5)
			if (this.wxpeopleList5 && this.wxpeopleList5.id) {
				this.params.dealUser = this.wxpeopleList5.id;
				this.params.dealUserName = this.wxpeopleList5.realName;

			}
		},
		methods: {
			getRange() {
				let myDate = new Date()
				let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
				let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
				let myDay = myDate.getDate()
				let oldMonth = myDate.getMonth()
				myMonth = myMonth > 9 ? myMonth : '0' + myMonth
				oldMonth = oldMonth > 9 ? oldMonth : '0' + oldMonth
				myDay = myDay > 9 ? myDay : '0' + myDay
				let nowDate = myYear + '/' + myMonth + '/' + myDay
				let oldDate = myYear + '/' + oldMonth + '/' + myDay
				this.range[0] = oldDate
				this.range[1] = nowDate
			},
			onShowDatePicker() {
				this.showPicker = true;
				console.log(this.showPicker)
			},
			onSelected(e, type) { //选择
				console.log(JSON.stringify(e))
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					this.getAllOrderNumList()
				}
			},

			selectItem(item) {
				if (item.amount > 0) {
					item.isChecked = !item.isChecked;
				} else {
					return uni.$u.toast('申请数必须大于0方可选择')
				}
			},
			togoInputChange(e) {
				this.orderNum = e.detail.value
				this.orderNumList = [];
				this.params.applyNum = '';
				uni.$u.http.post(`/device/mobile/devicePartApply/getApplyByOrderNum`, {
					orderNum: this.orderNum
				}).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						if (res.data.length > 0) {
							this.orderNumList = res.data;
						}
						this.infoList = {}
					}
				}).catch(err => {})
			},
			open() {},
			close() {
				this.isShow = false
			},
			updateItem(item) {
				console.log('updateItem===>', item)
				this.orderNumList2 = [];
				this.orderNum = item.orderNum;
				// this.params.applyNum=item.partDetailResponses[0].applyNum;
				this.orderNumList2 = item.partDetailResponses;
				this.isShow = false;
				// this.getInfoList();
				//清空单号以及数据
				this.params.applyNum = '';
				this.infoList = {}
			},
			getInfoList() {
				uni.$u.http.get(`/device/mobile/devicePartUsage/getUsageByApplyNum/${this.params.applyNum}`).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						if (res.data.length > 0) {
							res.data.forEach(item => {
								item.isChecked = false;
								item.returnNum = 1;
							})
						}
						this.infoList = JSON.parse(JSON.stringify(res.data));
						console.log('this.infoList===', this.infoList)
					}
				}).catch(err => {
					//错误信息也要清空数据更好体验
					this.infoList = {}
				})
			},
			getAllOrderNumList() {
				let params = {
					orderNum: '',
					startTime: this.range[0].replace(/\//g, '-'),
					endTime: this.range[1].replace(/\//g, '-')
				}
				uni.$u.http.post(`/device/mobile/devicePartApply/getApplyByOrderNum`, params).then(res => {
					if (res.code == 0) {
						this.orderNumList = res.data
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			},

			togoselectChange() {
				this.isShow = true;
			},
			togoselectChange2() {
				if (!this.orderNum) {
					return uni.$u.toast('请先输入或选择工单号')
				} else {
					this.isShow2 = true;
				}
			},
			open2() {},
			close2() {
				this.isShow2 = false
			},
			updateItem2(item, i) {
				console.log('updateItem2', item, i);
				this.params.applyNum = item.applyNum;
				this.isShow2 = false;
				this.getInfoList();
			},
			togoPeopleSelect(type) {
				uni.navigateTo({
					url: '/pages/subPackagesC/list/peoplelist?type=' + type
				})
			},
			onChange(e) {
				console.log('dfsfsdfdsfsd', e)
				// this.infoList.partDetailResponses[e.name].returnNum = e.value;
				// if (this.infoList.partDetailResponses[e.name].returnNum >= this.infoList.partDetailResponses[e
				// 		.name]
				// 	.amount) {
				// 	this.infoList.partDetailResponses[e.name].returnNum = this.infoList.partDetailResponses[e.name]
				// 		.amount;
				// 	return uni.$u.toast('退还数不能超过最大申请数')
				// }
			},
			//提交按钮
			togoCOnfirm() {
				if (!this.orderNum) return uni.$u.toast('工单号不能为空');
				if (!this.params.applyNum) return uni.$u.toast('原申请单号不能为空');
				if (!this.params.dealUser) return uni.$u.toast('请选择退还审批人');
				if (this.infoList.length <= 0) return uni.$u.toast('暂无可退还的备件');
				if (this.params.applyNum) {
					this.params.refundDetailList = [];
					this.infoList.forEach(item => {
						if (item.isChecked) {
							let dd = {
								partId: item.partId,
								amount: item.returnNum
							}
							this.params.refundDetailList.push(dd);
						}
					})
				}
				if (this.params.applyNum && this.params.refundDetailList.length == 0) return uni.$u.toast(
					'请勾选退还的备件');
				console.log('提交参数===>', this.params)
				uni.$u.http.post(`/device/mobile/devicePartRefund/savePartRefund`, this.params).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						uni.$u.toast('提交成功')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/subPackagesB/bjreturn/index'
							})
						}, 1000)
					}
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss">
	page {

		background: #ffffff;

	}


	.datePicker {
		background-color: #fff;
		color: #8c8c8c;
		font-size: 30rpx;
		padding: 27rpx 32rpx;
		border-bottom: 1px solid #f2f2f2;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		// justify-content: space-between;
	}

	.apply-title {
		background: #fff;
		display: flex;
		align-items: center;
		padding: 34rpx 0 0 34rpx;

		.left {
			display: flex;
			align-items: center;
			color: #4D4D4D;
		}
	}

	.bx-list {
		background: #fff;

		.bx-list-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 32rpx;
			border-bottom: 1px solid #f2f2f2;

			.left {
				display: flex;
				font-size: 32rpx;
				font-weight: 400;
				// letter-spacing: 0px;
				// line-height: 0px;
				color: #4D4D4D;
			}

			.right {
				display: flex;
				justify-content: space-around;
				width: 50%;

				.sm-add {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}

				.sm-sd {
					display: flex;
					align-items: center;
					padding: 10rpx 20rpx;
					border-radius: 24rpx;
					color: #0F53AC;
					background-color: rgba(2, 173, 130, 0.3);
					font-size: 24rpx;
				}
			}

			.right1 {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;
			}

			.right2 {
				border-radius: 8rpx;
				background: #0F53AC;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 16rpx 25rpx 16rpx 25rpx;
				color: #FFFFFF;
			}
		}

		.bx-info {
			display: flex;
			padding: 10rpx 20rpx 20rpx 20rpx;

			.left-icon {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}

			.right-txt {
				padding-left: 32rpx;

				.txt1 {
					color: #000000;
					font-size: 34rpx;
					font-weight: 400;
				}

				.txt2 {
					color: #8c8c8c;
					font-size: 28rpx;
					margin-top: 10rpx;
				}
			}

		}

		.input-textrea {
			margin: 20rpx 20rpx 0 20rpx;
			border-radius: 8rpx;
			background: #f2f2f2;

			.textrea {
				background: #f2f2f2;
			}
		}

	}

	.bx-title {
		background: #fff;
		padding: 20rpx;

		.left {
			display: flex;
			font-size: 34rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 0px;
			color: rgba(0, 0, 0, 1);
			background: #fff;
		}
	}

	.bx-upload {
		padding: 20rpx 30rpx;
		background: #fff;
	}

	.bx-title2 {
		color: #8c8c8c;
		font-size: 24rpx;
		padding: 30rpx;
		background: #f2f2f2;
	}

	.clear-bottom {
		width: 100%;
		height: 206rpx;
	}

	.bx-bottom {
		width: 100%;
		background: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 33rpx 0 80rpx 0;
		position: fixed;
		bottom: 0;

		.btn {
			width: 90%;
			height: 92rpx;
			border-radius: 12rpx;
			background: #0F53AC;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #fff;
			font-size: 34rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 0px;
		}
	}

	.search-list {
		background: #fff;
		// margin-top: 2rpx;


		.search-item {
			padding: 32rpx 32rpx 0 32rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				align-items: center;


				.unselect-bg {
					margin-right: 20rpx;
					color: #ffffff;
					font-size: 48rpx;
					text-shadow: 0 1px #E0E0E0, 1px 0 #E0E0E0, -1px 0 #E0E0E0, 0 -1px #E0E0E0;
				}

				.select-bg {
					margin-right: 20rpx;
					color: #0F53AC;
					font-size: 48rpx;
					text-shadow: 0 1px #E0E0E0, 1px 0 #E0E0E0, -1px 0 #E0E0E0, 0 -1px #E0E0E0;
				}

				.item-name {
					color: #000000;
					font-size: 34rpx;
				}

				.item-txt {
					padding: 20rpx 0;
					display: flex;
					width: calc(100%-34px);

					.left-icon {
						border-radius: 8rpx;

						image {
							width: 152rpx;
							height: 152rpx;
							border-radius: 8rpx;
						}
					}

					.right-txt {
						padding-left: 25rpx;
						width: 100%;

						.txt1 {
							width: 440rpx;
							height: 75rpx;
							font-size: 32rpx;
							color: #2B2B2B;
							padding-bottom: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.txt-right {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding-top: 10rpx;

							.txt2 {
								font-size: 28rpx;
								color: #8c8c8c;
							}

							.addnum {
								margin-left: 120rpx;

								.minus {
									color: #0F53AC;
									font-size: 34rpx;
								}

								.plus {
									color: #0F53AC;
									font-size: 34rpx;
								}

								.notselect-bg {
									color: #c4c4c4;
									font-size: 34rpx;
								}
							}
						}
					}
				}

			}

			.item-bottom {
				display: flex;
				padding: 32rpx 0;

				.txt-right {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 10rpx;

					.txt2 {
						font-size: 28rpx;
						color: #8c8c8c;
					}

				}
				.txt2 {
					font-size: 32rpx;
					color: #4D4D4D;
				}

				.addnum {
					margin-left: 115rpx;

					.minus {
						color: #0F53AC;
						font-size: 34rpx;
					}

					.plus {
						color: #0F53AC;
						font-size: 34rpx;
					}

					.notselect-bg {
						color: #c4c4c4;
						font-size: 34rpx;
					}
				}
			}

		}
	}
</style>